import styles from './index.module.scss';
import Icon from '@/components/Icon';
import NavBar from '@/components/NavBar';
import { useLocation } from 'react-router-dom';
import { useEffect } from 'react';
import { useDispatch } from 'react-redux';
import { getArticleDetailAction } from '@/store/action/article';
import { useAppSelector } from '@/store';
import dayjs from 'dayjs';

export default function Article() {
  const location = useLocation<{ id: string }>();
  const id = location.state.id;
  const dispatch = useDispatch();
  useEffect(() => {
    dispatch(getArticleDetailAction(id));
  }, [dispatch, id]);
  const { articleDetail: article } = useAppSelector((state) => state.article);

  return (
    <div className={styles.root}>
      <div className="root-wrapper">
        {/* 顶部导航栏 */}
        <NavBar right={<Icon type="icongengduo" />}>文章标题</NavBar>

        <div className="wrapper">
          <div className="article-wrapper">
            {/* 文章描述信息栏 */}
            <div className="header">
              <h1 className="title">{article.title}</h1>

              <div className="info">
                <span>{dayjs(article.pubdate).format('YYYY-MM-DD')}</span>
                <span>{article.read_count} 阅读</span>
                <span>{article.comm_count} 评论</span>
              </div>

              <div className="author">
                <img src={article.aut_photo} alt="" />
                <span className="name">{article.aut_name}</span>
                <span className="follow">关注</span>
              </div>
            </div>

            {/* 文章正文内容区域 */}
            <div className="content">
              <div
                className="content-html dg-html"
                dangerouslySetInnerHTML={{ __html: article.content }}
              ></div>
              <div className="date">
                发布文章时间：{dayjs(article.pubdate).format('YYYY-MM-DD')}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}
